<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>主机topo图</title>
    <meta name="decorator" content="default"/>
    <script type="text/javascript" src="${ctxStatic}/jtopo/jtopo-min.js"></script>
    <script type="text/javascript" src="${ctxStatic}/jtopo/toolbar.js"></script>


    <%---

      需要的改进：
      1、告警

      -----%>
    <script type="text/javascript">
        $(document).ready(function() {
            var canvas = document.getElementById('canvas');
            var stage = new JTopo.Stage(canvas);
            //显示工具栏
            showJTopoToobar(stage);

            var scene = new JTopo.Scene();
            scene.background = '/static/images/topo/bg.jpg';

            function node(x, y, img, name){
                var node = new JTopo.Node(name);
                node.setImage('/static/images/topo/' + img, true);
                node.setLocation(x, y);
                scene.add(node);
                return node;
            }

            function linkNode(nodeA, nodeZ, f){
                var link;
                if(f){
                    link = new JTopo.FoldLink(nodeA, nodeZ);
                }else{
                    link = new JTopo.Link(nodeA, nodeZ);
                }
                link.direction = 'vertical';
                scene.add(link);
                return link;
            }


            function hostLink(nodeA, nodeZ){
                var link = new JTopo.FlexionalLink(nodeA, nodeZ);
                link.shadow = false;
                link.offsetGap = 44;
                scene.add(link);
                return link;
            }

            function findNode(nodeName){
                var scene = stage.childs[0];
                var nodes = scene.childs.filter(function(e){
                    return e instanceof JTopo.Node;
                });
                nodes = nodes.filter(function(e){
                    if(e.text == null) return false;
                    return e.text.indexOf(nodeName) != -1;
                });
                return nodes[0];
            }

            $.ajax({
                url: "${ctx}/inventory/hostLinks/topoSkeleton" ,
                type: 'POST',
                dataType: 'json',
                success: function(data){
                    if(data != null){
                        var sumCount=data.sumCount;
                        var typeCount=data.typeCount;
                        var linkCount=data.linkCount;
                        var types=data.types;
                        var links=data.links;
                        var nodeArray = new Array(sumCount)

                        var lineFirstIndex = 1;
                        var lineFirstStep = 100;
                        var lineSecondIndex = 1;
                        var lineSecondStep = 150;
                        var lineThreeIndex = 1;
                        var lineThreeStep = 120;

                        for(var typeIndex=0; typeIndex<typeCount; typeIndex++){
                            var typeItem = types[typeIndex];
                            var type=typeItem.type;
                            var hostCount=typeItem.hostCount;

                            var hosts=typeItem.hosts;
                            for(var hostIndex=0; hostIndex<hostCount; hostIndex++){
                                var hostItem = hosts[hostIndex]
                                if(type=="type_windows"){
                                    nodeArray[hostItem.hindex]=node(lineFirstIndex*lineFirstStep, 43, "host.png", hostItem.alias);
                                    lineFirstIndex++;
                                }else if(type == "type_linux"){
                                    nodeArray[hostItem.hindex]=node(lineFirstIndex*lineFirstStep, 43, "server.png", hostItem.alias);
                                    lineFirstIndex++;
                                }else if(type == "type_network"){
                                    nodeArray[hostItem.hindex]=node(lineSecondIndex*lineSecondStep, 259, "router2.png", hostItem.alias);
                                    lineSecondIndex++;
                                }else if(type == "type_storage"){
                                    nodeArray[hostItem.hindex]=node(lineThreeIndex*lineThreeStep, 520, "mainframe.png", hostItem.alias);
                                    lineThreeIndex++
                                }else{
                                    nodeArray[hostItem.hindex]=node(lineThreeIndex*lineThreeStep, 520, "wanjet.png", hostItem.alias);
                                    lineThreeIndex++
                                }
                            }
                        }
                        for(var linkIndex=0; linkIndex<linkCount; linkIndex++){
                            var linkItem = links[linkIndex];
                            //linkNode(nodeArray[linkItem.fromHostindex], nodeArray[linkItem.toHostindex], true);
                            hostLink(nodeArray[linkItem.fromHostindex], nodeArray[linkItem.toHostindex]);
                        }
                    }
                }
            });
            setInterval(function(){
                var nodeDemo = findNode('测试机002');
                if(nodeDemo.alarm == '示例告警'){
                    nodeDemo.alarm = null;
                }else{
                    nodeDemo.alarm = '示例告警';
                }
            }, 600);
            stage.add(scene);
        });
    </script>
</head>
<body>
<div id="content">
    <canvas width="1400" height="600" id="canvas"></canvas>
</div>
</body>
</html>